<template>
  <view class="OrderPage">
    <scroll-view scroll-y="true" class="scrollView">
      <view class="scrollContent">
        <view class="ProjectView">
          <view class="businessContent">
            <image class="image" :src="detail.imgUrls[0]"/>
            <view class="info">
              <view class="title">
                {{ detail.serviceName }}
              </view>
              <view class="num">
                ×10件
              </view>
              <view class="price">
                <text class="unit">
                  卡券兑换
                </text>
              </view>
            </view>
          </view>
          <u-gap height="2" bg-color="#E9E9E9"></u-gap>
          <view class="code">
            <view>请出示二维码</view>
            <view class="swiperView">
              <swiper :current="currentIndex" @change="onSwiperChange" class="imageSwiper">
                <swiper-item>
                  <image
                    :src="getStaticDir('/1.png')"
                    class="swiperImage"
                  />
                </swiper-item>
                <swiper-item>
                  <image
                    :src="getStaticDir('/2.png')"
                    class="swiperImage"
                  />
                </swiper-item>
              </swiper>
            </view>
            <view>
              {{currentIndex+1}}/2
            </view>
          </view>
        </view>
      </view>

    </scroll-view>
  </view>
</template>
<script>
import moment from 'moment';
// import { getProductDetail, addressDelete, getMerchantDetail, getAddressList, userOrder } from '@/api/project.js';
export default {
  name: 'OrderPage',
  components: {},
  props: {},
  data() {
    return {
      id: '',
      show: true,
      detail: {
        id: '2',
        imgUrls: [this.staticDir+'/left.jpg'],
        serviceName: '大金柜',
        serviceDetail: '',
        servicePrice: '888'
      },
      currentIndex:0
    };
  },
  computed: {},
  methods: {
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
    }
  },
  watch: {},
  // 页面周期函数--监听页面加载
  onLoad: function(option) {
    this.id = option.id;
    // getProductDetail({ id: this.id }).then(({ data }) => {
    //   data.imgUrls = data.imgUrls.split(',');
    //   this.detail = data;
    //   getMerchantDetail({ id: data.ownMerchantId }).then((res) => {
    //     this.shop = res.data;
    //   });
    // });
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {

  },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style lang="scss" scoped>
/* #ifdef MP-BAIDU */
// @import '/static/iconfont.css';
/* #endif */
  .OrderPage{
    @import "./index.scss";
  }
</style>
